<%@ page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="en">
<jsp:include page="common/header.jsp"/>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/index.css"/>
    <title>资源信息-更多</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/common.js"></script>
    <script src="${pageContext.request.contextPath}/js/vue.js"></script>
</head>
<body>
<article>
    <!-- 网站主体 -->
    <div id="main">

        <section class="aside">
            <jsp:include page="common/asideUser.jsp"/>

        </section>

        <section>
            <h1 class="detail-res-more">更多资源</h1>
            <div class="bg-hr"></div>
            <div id="sec-more-list" class="detail-col-list" v-for="(r,index) in resourceList">
                <!-- 定义一个条目-->
                <div class="pro">
                    <div class="img">
                      <img :src="'${pageContext.request.contextPath}/images/'+r.ext+'.svg'" />
                    </div>
                    <div class="cs">
                        <div class="up">
                            <a :href="'${pageContext.request.contextPath}/resource/detail?resId='+r.id">{{r.resource_name}}</a>
                        </div>
                        <div class="down">
                            <b class="type">{{r.one.type_name}}<i>/</i>{{r.type_name}}</b>
                        </div>
                    </div>
                    <div class="arr">
                        <span>积分:<b>{{r.score}}</b></span>
                    </div>
                </div>

                <!-- 分页 -->

            </div>
            <jsp:include page="common/pagination.jsp"/>
        </section>
    </div>
</article>
</body>
<script>
    new Vue({
        el:"#main",
        data:{
            page: 1 ,
            total : 0 ,
            resourceList:[],

        },
        created(){
            this.showres();
        },
        methods:{
            showres(){
                fetch("${pageContext.request.contextPath}/user/resMsg?resUserId="+${param.u}).then(ret =>{
                    if (ret.status){
                        this.resourceList = ret.data.list;
                        this.total = ret.data.total;
                    }
                })
            },
        },
        watch: {
            page: function(newPage, oldPage) {
                // 获取 新页码 对应的数据
                fetch("${pageContext.request.contextPath}/user/resMsg?page=" + newPage+"&resUserId="+${param.u}).then(ret => {
                    if (ret.status) {
                        this.resourceList = ret.data.list ;
                        this.total = ret.data.total ;
                    }
                })
            }
        },
    })
</script>
</html>
